<template>
    <div class="login">
        <div class="login-con">
            <!-- 顶部切换 -->
            <ul class="menu-tab">
                <li v-for="item in menuData" :key="item.id" :class="{ current: item.current }" @click="clickMenu(item)">
                    {{ item.txt }}
                </li>
            </ul>

            <!-- 表单部分 -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <!-- 修改提示文字 并且修改type类型 与v-model绑定的数据 并且添加类名-->
                <el-form-item prop="username" class="item-from">
                    <label for="username">邮箱</label>
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="password" class="item-from">
                    <label for="password">密码</label>
                    <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <el-form-item prop="passwords" class="item-from" v-show="model === 'register'">
                    <label>重复密码</label>
                    <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <!-- 设置按钮 -->
                <el-form-item>
                    <el-button @click="submitForm(ruleFormRef)" type="danger" class="login-btn block" :disabled="btnbool">{{ model === "login" ? "登录" : "注册" }}</el-button>
                </el-form-item>
            </el-form>
            <!-- 表单部分 -->
        </div>
    </div>
</template>
    
<script lang="ts" setup>
import { reactive, ref ,watch} from "vue";
import type { FormInstance } from "element-plus";
import * as verification from "../../util/verification.js"
import link from "../../util/apis.ts"
import { ElMessage } from 'element-plus'
import useMd5 from "../../../hook/usenameMd5.js"
import {useRouter} from "vue-router"
let router=useRouter()
/**
 * 顶部切换变量
*/
const menuData = reactive([
    { txt: "登录", current: true, type: "login" },
    { txt: "注册", current: false, type: "register" },
]);
const model = ref("login");

/**
 * 顶部切换声明函数
*/
// 切换模块
const clickMenu = (data) => {
    menuData.forEach((elem) => {
        elem.current = false;
    });
    // 高光
    data.current = true;
    // 修改模块值
    model.value = data.type;
};
// 表单验证
const ruleFormRef = ref<FormInstance>();
const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error("Please input the age"));
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error("Please input digits"));
        } else {
            if (value < 18) {
                callback(new Error("Age must be greater than 18"));
            } else {
                callback();
            }
        }
    }, 1000);
};
const checkUser = (rule: any, value: any, callback: any) => {
    // 创建邮箱正则来进行邮箱格式校验
    // let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; 
    if (!value) {
        return callback(new Error("邮箱不能为空！！"));
        // 调用验证（注意删掉之前的取反）
    } else if (verification.verificationEmail(value)) {
        return callback(new Error("邮箱格式有误！！"));
    } else {
        callback();
    }
};
const validatePass = (rule: any, value: any, callback: any) => {
    // let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/;// 验证密码 6至15位的字母+数字 
    if (value === "") {
        callback(new Error("密码不能为空"));
        // 调用验证
    } else if (verification.verificationPwd(value)) {
        callback(new Error("密码格式有误!6至15位的字母+数字"));
    } else {
        callback();
    }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
    // 因为登录没有重复密码 所以在登录的时候跳过
    if (model.value === 'login') { callback(); }
    if (value === "") {
        callback(new Error("重复密码不能为空"));
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码必须相同"));
    } else {
        callback();
    }
};
//输入框中的变量
const ruleForm = reactive({
    username: "",
    password: "",
    passwords: "",
});
const rules = reactive({
    password: [{ validator: validatePass, trigger: "blur" }],
    passwords: [{ validator: validatePass2, trigger: "blur" }],
    username: [{ validator: checkUser, trigger: "blur" }],
});

// 表单提交
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.validate((valid) => {
 if (valid) {
   // 判断是登录还是注册
   if (model.value == "login") {
     console.log("登录");
     // 登录请求发送
     
     link(`/register?uname=${ruleForm.username}&pwd=${useMd5(ruleForm.password).value}`,"get").then(ok=>{
       // console.log(ok)
       let {data}=ok;//解构出数据
       // 判断data长度不为0登录成功
       if(data.length!=0){
         console.log("登录成功")
         // 编程式导航跳转
         router.push("/home")
       }else{
         console.log("登录失败")
       }
})
    
   } else {
     // 把要发送的数据拼装成一个对象
     //加密密码
     let data = {
       uname: ruleForm.username,
       pwd: useMd5(ruleForm.password).value,
     };  
     link("/register", "POST", data).then((ok) => {

    //    ElMessage.error("注册失败");
       // 判断数据是否为空 不为空表示注册成功
       let { data } = ok;
       // 转成成数组判断长度即可知道对象是否为空
       if (Object.keys(data).length !== 0) {
         ElMessage("注册成功");
       //  把输入框的内容切换到登录
         model.value="login"
         // 把上面的切换按钮编程登录
         // 先把所有的的控制切换的变量编程false
           menuData.forEach((elem) => {
             elem.current = false;
           });
           // 在吧登录的编程true
           menuData[0].current=true;
       } else {
         ElMessage.error("注册失败");
       }
     });
   }
 } else {
   console.log("error submit!");
   return false;
 }
});
};


//登录功能


let btnbool=ref(true)
watch(ruleForm,(newval)=>{
console.log(newval)
// 判断是登录还是注册
if(model.value=='login'){
 // 登录
 if(newval.username!=""&&newval.password!=""){
   btnbool.value=false
 }else{
    btnbool.value=true
 }
}else{
 // 注册
   if(newval.username!=""&&newval.password!=""&&newval.passwords!=""){
   btnbool.value=false
 }else{
    btnbool.value=true
 }
}
})
// 表单验证结束

//登陆成功后跳转到首页




</script>
<style lang="scss">
.login {
    background-color: #fff; //深蓝色
    height: 100%;
}

html,
body,
#app {
    //设置页面100%高
    height: 100%;
}

// 设置切换样式开始
.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;

    li {
        margin-left: 10px;
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
        background-color: #ccc;
    }

    .current {
        background-color: #ccc;

    }
}

// 设置切换样式结束

// 表单样式
.demo-ruleForm {
    width: 30%;
    margin: 50px auto;
    padding: 50px 100px;
    border: 1px solid #ccc;

    label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: black;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        width: 100%;
    }

    .login-btn {
        margin-top: 19px;
    }
}

// 表单样式
</style>